<template>
  <el-collapse class="supplier-form-collapse" v-model="activeCollapse">
    <el-collapse-item :name="item.key" v-for="(item, index) in collapseOptions" :key="item.key">
      <template #title>
        <CollapseItemTitle :index="index + 1" :title="item.title" :desc="item.desc" />
      </template>
      <slot :name="item.key"></slot>
    </el-collapse-item>
  </el-collapse>
</template>

<script lang="ts" setup name="ContentCollapse">
import { ref, withDefaults, defineExpose, defineProps, computed, watch } from 'vue';
import CollapseItemTitle from './components/CollapseItemTitle/index.vue';

interface ContentCollapseOptions {
  collapseOptions: {
    // 配置的key，也是slot的name
    key: string;
    // CollapseItemTitle的title
    title: string;
    // CollapseItemTitle的title
    desc?: string;
    // 是否默认打开，默认不打开
    defaultOpened?: boolean;
  }[];
}

interface ContentCollapseProps {
  option?: ContentCollapseOptions;
}
const props = withDefaults(defineProps<ContentCollapseProps>(), {
  option: () => {
    return {
      collapseOptions: []
    };
  }
});

// const collapseOptions = computed(() => {
//   return props.option.collapseOptions;
// });

const getDefaultOpened = (collapseOptions: ContentCollapseOptions['collapseOptions']) => {
  return collapseOptions.filter(item => item.defaultOpened).map(item => item.key);
};

const collapseOptions = ref(props.option.collapseOptions);

watch(
  () => props.option,
  val => {
    collapseOptions.value = val?.collapseOptions;
    activeCollapse.value = getDefaultOpened(collapseOptions.value);
  }
);

const activeCollapse = ref(getDefaultOpened(collapseOptions.value));

function updateCollapseOptions(options: any[]) {
  console.log('updateCollapseOptions', options);
  collapseOptions.value = options;
  activeCollapse.value = getDefaultOpened(collapseOptions.value);
}

defineExpose({
  updateCollapseOptions
});
</script>

<style lang="scss" scoped>
:deep(.el-collapse-item__header) {
  height: 56px;
  .el-form-item .el-form-item__label {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #0a1f33;
    line-height: 22px;
  }
}

.supplier-form-collapse.el-collapse {
  --el-collapse-border-color: #f2f3f5 !important;
}
</style>
